<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学知鸟</title>
		<link rel="shortcut icon" href="../../share/img/logo.png">
		<link rel="stylesheet" href="../../share/css/main.css">
		<script src="../../share/js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body class="p-10">
		<h1>函数</h1>
		<div class="row">
			<div class="col-1">
				<section>
					<h3>this</h3>
					<button onclick="click1()">原生事件</button>
					<button onclick="click2(this)">事件传入this</button>
					<button onclick="view.click1()">事件绑定到对象方法</button>
					<button id="btn4">jQuery事件绑定</button>
					<p>jQuery内部使用 handler.call(button, event) 方法调用事件处理方法，故内部 this == button。
						其中 handler 是事件处理程序，button 是事件源，event 是事件对象，因此handler的第一个参数为事件对象</p>
				</section>
				<section>
					<h3>箭头函数</h3>
					<button id="btn1">传统 this</button>
					<button id="btn2">箭头 this</button>
					<button id="btn3">传统定时器</button>
					<button id="btn5">箭头定时器</button>
				</section>
			</div>
			<div class="col-1">
				<section>
				</section>
			</div>
			<div class="col-1">
			</div>
		</div>
		<script type="text/javascript">
			var name1 = "Apple";

			var tom = {
				name1: "Tom",
				say: function() {
					// console.log(name);
					console.log("name: %s, this.name: %s", name1, this.name1);
				}
			}

			var lucy = {
				name1: "Lucy"
			};

			tom.say();

			lucy.say = tom.say;
			lucy.say();

			var f1 = tom.say;
			f1();

			/* -----------事件处理------------------------- */
			function click1() {
				console.log(this);
			}

			function click2(sender) {
				console.log(sender);
			}

			var view = {
				click1: function() {
					console.trace();
					console.log(this);
				}
			}
			/* ---------原型--------------------------- */
			function Person(name, age) {
				console.log(Person.prototype);
				console.log(this);
				this.name = name;
				this.age = age;

				this.say = function() {
					return this.name + "," + this.age;
				};
			}
			Person.prototype.valueOf = function() {
				return this.age;
			}
			var tom = new Person("tom", 22);
			console.log(tom);
			var jack = new Person("jack", 22);
			console.log(tom.say == jack.say);

			$("#btn4").click(view.click1);

			/* 箭头函数 --------------------------- */

			var t1 = {
				name1: "t1",
				count: 0,
				init() {
					document.getElementById("btn1").onclick = this.showThis;
					$("#btn2").click(() => this.showThis());
					$("#btn3").click(this.timer1.bind(this));
					$("#btn5").click(this.timer2.bind(this));
				},
				showThis() {
					console.log(this);
					alert(this.name1);
				},
				timer1() {
					setTimeout(function() {
						console.log(this.count++)
					}, 0);
				},
				timer2() {
					setTimeout(() => console.log(this.count++), 0);
				}
			}
			t1.init();
		</script>
	</body>
</html>
